<template>
  <!--
    Minimap 导航器组件，包含标题和缩略图区域
  -->
  <div id="navigator">
    <div class="pannel-title">导航器</div>
    <div id="minimap" class="minimap" ref="minimap"></div>
    <!--
      预留的缩放控件区域（未启用）
      <div id="zoom-slider">
        <a class="zoom-dropdown-btn ant-dropdown-trigger" href="#">
          100 %
          <i class="anticon anticon-down"></i>
        </a>
      </div>
    -->
  </div>
</template>

<script>
import Minimap from "@antv/g6/build/minimap"; // 引入 G6 的 Minimap 插件
import eventBus from "@/utils/eventBus"; // 引入全局事件总线
export default {
  data() {
    return {
      minimap: null, // Minimap 实例
      graph: null // 画布实例
    };
  },
  created() {
    this.bindEvent(); // 组件创建时绑定事件
  },
  mounted() {
    // 组件挂载后初始化 Minimap
    this.$nextTick(() => {
      this.initMinmap();
    });
  },
  methods: {
    // 初始化 Minimap 实例
    initMinmap() {
      const cfgs = {
        container: "minimap" // 指定容器 id
      };
      this.minimap = new Minimap({ ...cfgs });
    },
    // 绑定 afterAddPage 事件，获取 graph 实例
    bindEvent() {
      eventBus.$on("afterAddPage", page => {
        this.graph = page.graph;
        this.bindPage();
      });
    },
    // 将 Minimap 插件添加到画布
    bindPage() {
      if (!this.minimap || !this.graph) {
        return;
      }
      this.graph.addPlugin(this.minimap)
    }
  }
};
</script>

<style scoped>
/*
#navigator 导航器整体样式，定位于右下角
*/
#navigator {
  width: 200px;
  /* height: 176px; */
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 3;
}

/*
面板标题样式
*/
.pannel-title {
  height: 32px;
  border-top: 1px solid #dce3e8;
  border-bottom: 1px solid #dce3e8;
  background: #ebeef2;
  color: #000;
  line-height: 28px;
  padding-left: 12px;
}
</style>
